<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
</head>

<body>
    <!-- 
        计算属性
            概念：基于现有的数据，计算出来的新属性，依赖的数据变化，自动从新计算
            语法：
                ①声明在computed配置项中，一个计算属性对象一个函数
                ②使用起来和普通属性一样使用{{计算属性名}}
            格式：
                computed:{
                    计算属性名(){
                        逻辑
                        return 结果
                    }
                }
    -->
    <div id="app">
        <h1>小黑礼物盒</h1>
        <table border="1">
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.num}}个</td>
            </tr>
        </table>
        <p>礼物总数：<span>{{total}}</span>个</p>
    </div>

    <script src="./script/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: '篮球', num: 1 },
                    { id: 2, name: '足球', num: 5 },
                    { id: 3, name: '羽毛球', num: 6 }
                ]
            },
            computed: {
                total() {
                    // 计算属性内部，可以直接通过this访问到app实例
                    // 需求：对 this.list 数组里面的 num 进行求和 -> reduce
                    // 注意：reduce可以不给初始值 但是这里得给 因为item是对象
                    let result = this.list.reduce((acc, item) => acc + item.num, 0);
                    return result
                }
            }
        })
    </script>
</body>

</html>